import * as React from 'react';
import Box from '@/commonComponents/box/index';
import Seat from '../seat';
import type { ChannelProps } from '../seat';
import TrainContext from '../../context';
import './index.module.scss';
const { memo, useCallback, useState, useContext } = React;
interface SeatProps {
  type: string;
  priceMsg?: string;
  ticketsLeft?: string;
  channels?: ChannelProps[];
}
interface CandidateProps {
  data?: [1];
  isLoading?: boolean;
  tickets: SeatProps[];
}
const Candidate = (props: CandidateProps) => {
  const { tickets } = props;

  const [expandedIndex, setExpandedIndex] = useState(-1);

  const onToggle = useCallback(
    (idx: number) => {
      setExpandedIndex(idx === expandedIndex ? -1 : idx);
    },
    [expandedIndex]
  );
  const ticketInfo = React.useContext(TrainContext);
  const name = useContext(TrainContext);
  return (
    <Box data={[1]} isLoading={false} styleName="Candidate-box">
      <ul>
        {Array.isArray(tickets) &&
          tickets.map((ticket, idx) => {
            return (
              <Seat
                idx={idx}
                onToggle={onToggle}
                expanded={expandedIndex === idx}
                type={ticket?.type}
                priceMsg={ticket.priceMsg}
                ticketsLeft={ticket.ticketsLeft}
                channels={ticket.channels}
                key={ticket.type}
              />
            );
          })}
      </ul>
    </Box>
  );
};
export default memo(Candidate);
